import React, {Component, useEffect, useMemo, useState} from 'react';
import {SearchNavigationContainer,Navigation, NavigationItem} from "./SearchNavigation.css";
import {matchPath, NavLink, resolvePath, useLocation, useNavigate, useResolvedPath} from "react-router-dom";

let routes = [
    {
        title:"歌曲",
        to:"songs",
    },
    {
        title:"歌手",
        to:"artists",
    },
    {
        title:"视频",
        to:"videos",
    },
    {
        title:"用户",
        to:"users",
    },
]
function SearchNavigation(props) {
    let nav = useNavigate();
    let location = useLocation();
    let rp = useResolvedPath("");
    return (
        <SearchNavigationContainer>
            <Navigation>
                {
                    routes.map(e=>
                        <NavigationItem key={e.title} className={isMatch(e)?"active":""} onClick={()=>nav(e.to+location.search)}>
                            {e.title}
                        </NavigationItem>
                    )
                }
            </Navigation>
        </SearchNavigationContainer>
    )
    function isMatch(route){
        return rp.pathname+"/"+route.to === location.pathname
    }

}

export default React.memo(SearchNavigation);